<template>
  <div class="container">
    <v-snackbar
        timeout="2000"
        :value="snackbarShow"
        :color="snackbarColor"
        absolute
        top
        v-model="snackbarShow"
    >{{snackbarText}}
    </v-snackbar>
    <h4 class="title">基本信息</h4>
    <v-divider></v-divider>
    <div class="msg_container">
      <!--      头像-->
      <div class="icon mb-7">
        <div class="pr-15 mr-4">头像</div>
        <el-upload
            class="avatar-uploader"
            :headers="header"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarFail"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <!--姓名-->
      <div class="d-flex flex-row">
        <div class="pr-15 mr-4 mt-2">姓名</div>
        <div class="input_width">
          <v-text-field
                  label="请输入"
                  solo
                  dense
                  :value="userMsg.fullName"
                  v-model="userMsg.fullName"
          ></v-text-field>
        </div>
      </div>

      <!--账号-->
      <div class="d-flex flex-row">
        <div class="pr-15 mr-4 mt-2">学号</div>
        <div class="input_width">
          <v-text-field
              label="请输入"
              solo
              dense
              :value="userMsg.username"
              v-model="userMsg.username"
          ></v-text-field>
        </div>
      </div>

      <div class="d-flex flex-row">
        <div class="pr-15 mr-4 mt-2">班级</div>
        <div class="input_width">
          <v-text-field
              label="请输入"
              solo
              dense
              :value="userMsg.grades"
              v-model="userMsg.grades"
          ></v-text-field>
        </div>
      </div>

      <div class="d-flex flex-row">
        <div class="pr-15 mr-4 mt-2">专业</div>
        <el-select class="input_width" v-model="major" placeholder="请选择">
          <el-option
              v-for="item in majors"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="d-flex flex-row" style="margin-top: 2%">
        <div class="pr-15 mr-4 mt-2">学院</div>
          <el-select class="input_width" v-model="institute" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
      </div>

<!--            &lt;!&ndash;      密码-->
<!--      <div class="d-flex flex-row">-->
<!--        <div class="pr-15 mr-4 mt-2">密码</div>-->
<!--        <div class="input_width">-->
<!--          <v-text-field-->
<!--              label="请输入"-->
<!--              solo-->
<!--              dense-->
<!--              :value="userMsg.password"-->
<!--              v-model="userMsg.password"-->
<!--          ></v-text-field>-->
<!--        </div>-->
<!--      </div>-->

      <!--      手机-->
      <div class="d-flex flex-row" style="margin-top: 2%">
        <div class="pr-15 mr-4 mt-2">手机</div>
        <div class="input_width">
          <v-text-field
              label="请输入"
              solo
              dense
              :value="userMsg.phone"
              v-model="userMsg.phone"
          ></v-text-field>
        </div>
      </div>
      <!--      邮箱-->
      <div class="d-flex flex-row">
        <div class="pr-15 mr-4 mt-2">邮箱</div>
        <div class="input_width">
          <v-text-field
              label="请输入"
              solo
              dense
              :value="userMsg.email"
              v-model="userMsg.email"
          ></v-text-field>
        </div>
      </div>
      <!--      地址-->
      <div class="d-flex flex-row">
        <div class="pr-15 mr-4 mt-2">地址</div>
        <div class="input_width">
          <v-text-field
              label="请输入"
              solo
              dense
              :value="userMsg.address"
              v-model="userMsg.address"
          ></v-text-field>
        </div>
      </div>
    </div>
    <!--    保存按钮-->
    <v-btn
        class="bt_save"
        color="#42A5F5"
        rounded
        width="100px"
        height="40px"
        dark
        style="font-weight: bold;font-size: 16px"
        @click="saveBt"
    >保存修改</v-btn>
  </div>
</template>

<script>
  import {getPersonInfo, postPerson} from "../../network/Details/personal/personal";

export default {
  name: "Personal",
  data(){
    return{
      userMsg:{

      },
      //提示
      snackbarShow:false,
      snackbarText:'',
      snackbarColor:'#42A5F5',
      imageUrl: '',
      uploadUrl:'',
      token:'',
      options: [{
        value: '智能技术与工程学院',
        label: '智能技术与工程学院'
      }, {
        value: '石油与天然气工程学院',
        label: '石油与天然气工程学院'
      }, {
        value: '冶金与材料工程学院',
        label: '冶金与材料工程学院'
      }, {
        value: '机械与动力工程学院',
        label: '机械与动力工程学院'
      }, {
        value: '建筑工程学院',
        label: '建筑工程学院'
      }],
      institute: '',
      major:'',
      majors:[
        {
          value: '软件工程',
          label: '软件工程'
        }, {
          value: '计算机科学与技术',
          label: '计算机科学与技术'
        }, {
          value: '生物工程',
          label: '生物工程'
        }, {
          value: '人力资源管理',
          label: '人力资源管理'
        }, {
          value: '数学与应用数学',
          label: '数学与应用数学'
        }
      ]
    }
  },
  created() {
    this.uploadUrl = this.$store.state.baseURL + 'login/user/uploadAvatar';
    this.token =  window.localStorage.getItem("token");
    this.init()
    // let username = window.sessionStorage.getItem("username");
    //发起请求
/*    personalMsg({
      username:username
    }).then(res => {
      if(res.code === 200){
        this.userMsg.username = res.data.username;
        this.userMsg.birthday = res.data.birthday;
        this.userMsg.phone = res.data.phone;
        this.userMsg.sex = res.data.sex;
        this.userMsg.type = res.data.type;
        this.userMsg.address = res.data.address;
      }
      this.snackbarText = res.message;
      this.snackbarShow = true;
    })*/
  },
  computed:{
    header() {
      return {'token' : this.token};
    },
  },
  methods:{
    //保存
    saveBt(){
      let _this = this;
      _this.userMsg.institute = _this.institute
      _this.userMsg.major = _this.major
      postPerson(_this.userMsg).then(res => {
        if(res.code === 200){
          this.$message.success("保存成功")
        }
        _this.init()
      })

/*      updateMsg(this.userMsg).then(res => {
        this.snackbarText = res.message;
        this.snackbarShow = true;
      })*/
    },
    init(){
      const _this = this;
      getPersonInfo().then(res => {
        _this.userMsg = res.data;
        _this.imageUrl = this.$store.state.ossBaseUrl + res.data.avatar
        _this.institute = res.data.institute
        _this.major = res.data.major
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = this.$store.state.ossBaseUrl + res.data;
      console.log("imag:" + this.imageUrl)
      this.$store.state.userInfo.avatar = this.imageUrl;
      this.$message.success("更换头像成功")
    },
    handleAvatarFail(){
      this.$message.error("更换头像失败，请稍后再试");
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.container {
  background-color: white;
  width: 80%;
  height: 100%;
  margin-left: 10%;
  margin-top: 2%;
  display: flex;
  flex-direction: column;
  .msg_container{
    margin-left: 10%;
    margin-top: 20px;
    .icon{
      margin-top: 10px;
      display: flex;
      align-items: center;
    }
  }
}
.input_width{
  width: 50%;
}
.bt_save{
  margin-top: 10px;
  margin-left: 10%;
}
</style>
